<template>
  <el-tabs :tab-position="tabPosition">
    <el-tab-pane v-for="(item, index) in info" :key="index" :label="item.label">
      <div class="row row-cols-1 row-cols-lg-2">
        <div class="col my-2" v-for="(items, indexs) in item.imgSrc" :key="indexs">
          <div class="position-relative" style="overflow: hidden; width:100%;height:450px; ">
            <img :src="items.img" alt="" />
            <div class="desc">{{ items.title }}</div>
          </div>
        </div>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
export default {
  data() {
    return {
      tabPosition: "top",
      info: [
        {
          label: "政治",
          imgSrc: [
            {
              title: "【港澳回归，一雪百年耻辱】",
              img:
                "https://img2.baidu.com/it/u=4134160980,119630473&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=266",
            },
            {
              title: "【联合国常任理事国，一票否决】",
              img:
                "https://img1.baidu.com/it/u=1178592125,3063733296&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=398",
            },
          ],
        },
        {
          label: "经济",
          imgSrc: [
            {
              title: "【南水北调,史无前例。】",
              img:
                "https://img1.baidu.com/it/u=136566748,157132697&fm=253&fmt=auto&app=138&f=JPEG?w=550&h=267",
            },
            {
              title: "【西藏天路，世界屋脊上的巨龙】",
              img:
                "https://img2.baidu.com/it/u=1145138356,2881923693&fm=253&fmt=auto&app=120&f=JPEG?w=752&h=500",
            },
          ],
        },
        {
          label: "体育",
          imgSrc: [
            {
              title: "【北京奥运，世界最好的奥运会，可以说前无古人后无来者】",
              img:
                "https://img0.baidu.com/it/u=543036115,2142230029&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=306",
            },
            {
              title: "【2022冬奥会】",
              img:
                "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnews.cnhubei.com%2Fa%2F10001%2F202202%2F5f5433cfc66c418e71d77e4d989c7c9d.jpeg&refer=http%3A%2F%2Fnews.cnhubei.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659675732&t=5e20b40213f4e3868c9b73e888a4a3dd",
            },
          ],
        },
        {
          label: "科技",
          imgSrc: [
            {
              title: "【中国天眼，世界最大的望眼镜】",
              img:
                "https://img0.baidu.com/it/u=1097254191,799017368&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500",
            },
            {
              title: "【5G科技 5G领跑者 】",
              img:
                "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp2.itc.cn%2Fimages01%2F20200617%2Fb21970769e8b40ebb8dda8828420d8e5.jpeg&refer=http%3A%2F%2Fp2.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659675774&t=5aad58c20eb0b44022cfd581065ed284",
            },
          ],
        },
        {
          label: "军事",
          imgSrc: [
            {
              title: "【辽宁航母，大国霸权】",
              img:
                "https://img1.baidu.com/it/u=3771239389,2303542670&fm=253&fmt=auto&app=138&f=JPG?w=700&h=500",
            },
            {
              title: "中国军队",
              img:
                "https://img1.baidu.com/it/u=1068161372,126212378&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500",
            },
          ],
        },
      ],
    };
  },
};
</script>
<style lang="less" scoped>
img {
  width: 100%;
  height: 100%;
  border-radius: 12px;
}

.desc {
  margin-top: 30px;
  height: 70px;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 110%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.5s;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  border-radius: 0 0 20px 20px;
  z-index: 3;
}

img:hover~.desc {
  top: 86%;
}

@media (max-width: 768px) {
  img:hover~.desc {
    top: 75%;
  }
}
</style>
